<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ok {
				color: green;
			}

			.error {
				color: red;
			}
		</style>
		<script type="text/javascript">
			function checkName() {
				var nameInput = document.getElementById("nameID");
				var reg = /\w{5,10}/g;
				if (nameInput.value.match(reg) == nameInput.value) {
					nameHint.className = "ok";
				} else {
					nameHint.className = "error";
				}
			}
			function checkEmail(){
				var emailName = document.getElementById("emailName");
				var reg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/g;
				if (emailName.value.match(reg) == emailName.value) {
					emailHint.className = "ok";
				} else {
					emailHint.className = "error";
				}
			} 
		</script>
	</head>
	<body>
		<span>名字：</span>
		<input type="text" id="nameID" onblur="checkName()">
		<span id="nameHint">5-10位字母、数字、下划线</span></br>
		<span>邮箱：</span>
		<input type="password" id="emailName" onblur="checkEmail()">
		<span id="emailHint">必须符合邮箱的格式</span>
	</body>
</html>
